import React, { useCallback } from 'react';
import { useState } from 'react';

// 使用useCallback( ) 可以缓存函数,避免函数的重复创建, 节省开销
// 语法: const 方法名 = useCallBack(()=>{},[依赖的变量])
// 当参数2 数组中依赖的变量发生改变,则会重新执行参数1 函数, 如果参数2 中的变量没有改变,
// 则缓存 参数1 的函数


const Father = () => {

    const [count, setCount] = useState(0)
    const [inp, setinp] = useState('')
    const [girlArr, setgirlArr] = useState(['刘亦菲', '关之琳', '邱淑贞', '林心如']);
    // 当count 这个变量变化的时候 addGirlFn被重新创建赋值, 这个步骤是无意义的
    // 希望当 inp的值改变后, 然后再重新创建这个函数此时更有意义, 更加接收浏览器的开销

    // 当参数2中监听的值为空数组的时候, 因为是空数组,所有当没有监听的数据发生变化,所以 useCaalback
    // 参数1 的函数只在初始化的时候执行, 而inp 变化的时候不执行

    // 当参数2 中监听的值为inp 的时候, 因为inp 发生变化,所以函数重新创建执行, 所以inp值为最新的值
    // 所以当count 发生变化的时候, 由于没有监听, 参数1 函数就不会重新创建.节省浏览器创建函数的性能开销
    // 使用上一次缓存的函数

    // const addGirlFn = () => {
    //     girlArr.push(inp)
    //     setgirlArr([...girlArr])
    // }

    // 面试题: 
    // 请问usememo 和usecallback 的区别?
    // usememo : 缓存的值, 相当与vue中的计算属性, 依赖于一个变量, 当变量变化重新计算, 不变化使用上一次缓存的结果 
    // useCallback: 缓存的函数, 依赖的变量发生变化, 重新创建函数, 否则使用上一次缓存的函数

    const addGirlFn = useCallback(() => {
        girlArr.push(inp) // ''
        setgirlArr([...girlArr])
    }, [inp])

    // console.log(addGirlFn);
    return (
        <div>
            <p onClick={() => setCount(count + 1)}>
                count: {count}
            </p>
            <p>
                <input type='text' value={inp} onChange={(e) => setinp(e.target.value)} />
                <button onClick={addGirlFn}>添加美女</button>
            </p>
            <ul>
                {
                    girlArr.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Father;
